import initTimer from './timer'

class Template {
    constructor(player) {
        this.player = player
        this.timer = initTimer()
        this.__initDOM()
        this.__initEvent()
    }

    __initDOM() {
        const container = this.player.container
        const property = this.player.property
        container.innerHTML = `
            <video class="z-player_video" webkit-playsinline playsinline crossorigin="anonymous"
                ${property.airplay ? ' x-webkit-airplay="allow"' : ''}
                ${property.preload ? ' preload="' + property.preload + '"' : ''}
                ${property.video.poster ? ' poster="' + property.video.poster + '"' : ''}
                src="${property.video.src ? property.video.src : ''}"></video> 
            <div class="z-player_wrap">
                <div class="z-player_notice" style="top: -20px;"></div>
                <div class="z-player_top"></div>
                <div class="z-player_bottom"></div>
            </div>
        `
        this.video = container.querySelector('.z-player_video')
        this.video.volume = property.volume
        this.video.playbackRate = property.playbackRate
        this.wrap = container.querySelector('.z-player_wrap')
        this.top = container.querySelector('.z-player_top')
        this.bottom = container.querySelector('.z-player_bottom')
        if (this.player.__util.isMobile) this.player.container.style.width = '100%'
        this.notice = container.querySelector('.z-player_notice')
    }

    __initEvent() {
        for (let key in this.player.__event.ve) {
            this.video.addEventListener(key, () => {
                this.player.__event.trigger(key)
            })
        }
        this.player.__event.on('durationchange', () => {
            this.player.container.style.removeProperty('pointer-events')
            if (this.player.property.autoplay) this.player.play()
        })
        this.player.__event.on('canplay', () => {
            this.video.style['display'] = 'block'
        })
        this.player.__event.on('error', () => {
            this.player.container.style['pointer-events'] = 'none'
            this.player.notice(this.player.__translate('视频载入失败'))
        })
        const showBottom = () => {
            if (!this.bottom.style.padding) return
            this.timer.clearTimeout('mobile_enter')
            this.bottom.style.removeProperty('padding')
            this.bottom.style.removeProperty('width')
            this.bottom.style['transform'] = 'translateY(0)'
            this.player.__util.isMobile && this.timer.setTimeout(hideBottom, 3000, 'mobile_enter')
        }
        const hideBottom = () => {
            if (this.video.paused) return
            this.bottom.style['transform'] = 'translateY(calc(100% - 10px))'
            this.bottom.style['padding'] = '0'
            this.bottom.style['width'] = '100%'
        }
        this.wrap.addEventListener(this.player.__util.event.move, showBottom)
        this.wrap.addEventListener(this.player.__util.event.leave, hideBottom)
        this.top.addEventListener(this.player.__util.event.click, () => {
            showBottom()
            if (this.bottom.style['padding'] && this.player.__util.isMobile) return
            if (this.video.paused) this.player.play()
            else this.player.pause()
        })
    }
}

export default player => new Template(player)
